<template>
	<view class="operate-page">
		<view class="own-view">
			<view class="photo-box">
				<!-- 头像 -->
				<view class="own-msg">
					<image class="my-photo" :src="`https://static.xpandago.net/${userData.headIco}`"></image>
					<view class="msg">
						<view class="nike-name">{{userData.userName}}</view>
						<view class="signature">{{userData.idiograph}}</view>
						<view class="rank">
							<image :src="levelImg" :class="levelImg === '/static/h5img/dengji_icons@2x.png'?'icon-img':'level-img'"></image>
							<text>
								{{userData.memberTypeStr}}
							</text>
							<uniRate :value="userData.star" size="10" disabled="true" active-color="#DBC291"></uniRate>
						</view>
					</view>
				</view>
				<!-- <image src="/static/h5img/narrow_white@2x.png" class="arrow-right"></image> -->
			</view>
			<!-- 数据展示模块 -->
			<view class="data-modal">
				<!-- 订单管理 -->
				<view class="data-item order-management">
					<view class="order-header">
						<text class="card-title">订单管理</text>
						<view @tap="seeAll"><text class="see-all">查看全部></text></view>
					</view>
					<view class="order-data">
						<view class="order-item" v-for="(item, index) in orderData" :key="`order-${index}`">
							<view class="item-count">
								{{item.count}}
							</view>
							<p class="item-text">
								{{item.text}}
							</p>
						</view>
					</view>
				</view>
				<!-- 交易数据 -->
				<view class="data-item transaction-data">
					<text class="card-title">交易数据</text>
					<view class="trans-list">
						<view class="trans-item" v-for="(item, index) in transData" :key="`trans-${index}`">
							<view class="item-count">
								{{item.count}}
							</view>
							<p class="item-text">
								{{item.text}}
							</p>
						</view>
					</view>
				</view>
				<!-- 我的工具箱 -->
				<view class="data-item my-tools">
					<text class="card-title">我的工具箱</text>
					<view class="tools-list">
						<view class="tools-item" v-for="(item, index) in toolsData" :key="`tools-${index}`" @tap="linktoTools(item)">
							<view class="tool-img-view">
								<image class="tool-img" :src="item.src"></image>
							</view>
							<p class="item-text">
								{{item.text}}
							</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import uniRate from '@/components/uni-rate/uni-rate.vue'
import { ifLogin } from '@/common/js/index'
	export default {
		data() {
			return {
				userData: {},
				levelImg: '',
				token: '',
				orderData: [
					{ text: '代付款', count: 12 },
					{ text: '待发货', count: 36 },
					{ text: '待收货', count: 14 },
					{ text: '售后中', count: 10 },
				],
				transData: [
					{ text: '今日订单数', count: 12 },
					{ text: '今日总成交额', count: '￥103.04' },
					{ text: '今日总支出额', count: '￥91.40' },
				],
				toolsData: [
					{ text: '实名认证', src: '/static/h5img/smrz@2x.png' },
					{ text: '账号管理', src: '/static/h5img/zhgl@2x.png' },
					{ text: '我的活动', src: '/static/h5img/wdhd@2x.png', url: "/pages/myActivity/myActivity" },
					{ text: '素材收藏', src: '/static/h5img/scsc@2x.png', url: "/pages/resourceCollect/resourceCollect" },
					{ text: '服务协议', src: '/static/h5img/fwxy@2x.png' },
					{ text: '消息中心', src: '/static/h5img/xxzx@2x.png' },
					{ text: '建议反馈', src: '/static/h5img/jyfk@2x.png' },
					{ text: '在线客服', src: '/static/h5img/zxkf@2x.png' },
				]
			}
		},
		components:{
			uniRate,
		},
		methods: {
			// 订单管理->查看全部
			seeAll() {
				uni.navigateTo({
					url:'/pages/seeAll/seeAll'
				})
			},
			// 我的工具箱链接跳转
			linktoTools({url='', text}) {
				if (url) {
					uni.navigateTo({url: url});
				} else if (text === '服务协议') {
					window.open("https://xpandago-h5.oss-cn-shanghai.aliyuncs.com/consoledev/static/%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.pdf")
				} else {
					uni.showToast({
					   title: '开发中...',
					   icon: 'none'
					})
				}
			},
			// 获取用户信息
			async getUser() {
				this.token=uni.getStorageSync('token')
				const [err,res] = await api.userMsg({
					header:{
						'Content-Type': 'application/json;charset=UTF-8',
						'token': this.token
					}
				})
				if (res) {
					const { data } = res
					if (data.code === 0 && data.data) {
						this.userData = data.data
						this.levelIcon(data.data)
					}
				}
			},
			// 渲染用户等级icon
			levelIcon({star, memberTypeStr}) {
				let str = ''
				if (memberTypeStr === '熊猫大将' && star) {
					str = `/static/h5img/xmsj_icons${star}@2x.png`
				} else {
					str = '/static/h5img/dengji_icons@2x.png'
				}
				this.levelImg = str
			}
		},
		onLoad() {
			const status = ifLogin()
			if (status) {
				this.getUser()
			}
		}
	}
</script>

<style scoped lang="scss">
	body, uni-page-body{
		background-color: #f6f6f6;
	}
	.operate-page{
		background-color: #f6f6f6;
		background-image: url('../../static/h5img/czt_bg@2x.png');
		background-size: auto 420rpx;
		background-repeat: no-repeat;
		min-height: 420rpx;
		margin-top: 0;
		height: 100%;
		.own-view{
			padding: 68rpx 30rpx 40rpx 30rpx;
			.photo-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.own-msg{
					display: flex;
					.my-photo{
						height: 118rpx;
						width: 118rpx;
						border-radius: 50%;
					}
					.msg{
						margin-left: 30rpx;
						font-family: PingFang-SC-Medium;
						.nike-name{
							font-size: 30rpx;
							color: #fff;
							line-height: 38rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							height: 38rpx;
						}
						.signature{
							font-size: 20rpx;
							color: #999;
							height: 40rpx;
							line-height: 40rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							visibility: hidden;
						}
						.rank{
							display: flex;
							align-items: center;
							background-color: #322F2C;
							color: #DBC291;
							border-radius: 21rpx;
							height:42rpx;
							font-family: PingFang-SC-Regular;
							font-size: 20rpx;
							padding: 0 12rpx;
							.icon-img{
								width: 24rpx;
								height: 22rpx;
								margin-right: 4rpx;
							}
							.level-img{
								width: 24rpx;
								height: 34rpx;
								margin-right: 4rpx;
							}
							/deep/ .uni-rate{
								padding-top: 8rpx;
								padding-left: 10rpx;
								.uni-rate__icon{
									line-height: 10rpx;
									>.uni-icons{
										display: none;
									}
									.uni-rate__icon-on{
										position: unset;
										line-height: 20rpx;
										font-size: 20rpx;
										font-size: 0;
									}
								}
							}
						}
					}
				}
				.arrow-right{
					width: 15rpx;
					height: 27rpx;
				}
			}
			.data-modal{
				margin-top: 60rpx;
				.data-item{
					background-color: #fff;
					border-radius: 24rpx;
					padding: 0 0 40rpx 0;
					color: #333;
					.card-title{
						margin-left: 35rpx;
						font-size: 32rpx;
						line-height: 86rpx;
						font-family: PingFang-SC-Bold;
					}
					.item-count{
						font-family: DINCond-Bold;
						font-size: 38rpx;
						line-height: 28rpx;
						margin-top: 36rpx;
					}
					.item-text{
						padding-top: 26rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						line-height: 24rpx;
					}
				}
				.order-management{
					.order-header{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.see-all{
							color: #999;
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							margin-right: 35rpx;
						}
					}
					.order-data{
						display: flex;
						.order-item{
							width: 25%;
							text-align: center;
						}
					}
				}
				.transaction-data{
					margin-top: 24rpx;
					.trans-list{
						display: flex;
						.trans-item{
							width: 33.3%;
							text-align: center;
						}
					}
				}
				.my-tools{
					margin-top: 24rpx;
					.tools-list{
						display: flex;
						flex-wrap: wrap;
						margin-top: -10rpx;
						.tools-item{
							width: 25%;
							text-align: center;
							.tool-img-view{
								margin-top: 40rpx;
								height: 36rpx;
							}
							.tool-img{
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
